<template>
  <Content title="首页" :autoBack="false" tab tabCurrent="home">
    <view class="page-box">
      <view class="device-status">
        <view class="title">
          <text class="label">设备状态</text>
          <text class="link" @click="toPath('/pages/home/all-view')"
            >查看更多</text
          >
        </view>
        <view class="echart-box">
          <EchartsRing ref="echartsRing" v-if="!loading1"></EchartsRing>
        </view>
      </view>
      <view class="device-availability">
        <view class="title">
          <text class="label">设备可利用率</text>
        </view>
        <view class="echart-box">
          <EchartsArcbar ref="echartsArcbar" v-if="!loading"></EchartsArcbar>
          <EchartsArcbar ref="echartsArcbar1" v-if="!loading"></EchartsArcbar>
          <EchartsArcbar ref="echartsArcbar2" v-if="!loading"></EchartsArcbar>
        </view>
      </view>

      <view class="early-warning">
        <view class="title">
          <text class="label">消息</text>
        </view>
        <view class="early-box">
          <view class="early-warning-item" v-for="(item,index) in warnList" :key="index" @click="warnTypeClick(item)">
            <view class="img-box"></view>
            <view class="item-r">
              <!-- <p>{{item.value}}</p> -->
              <p>{{item.label}}</p>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Content>
</template>
<script>
import fetch from "@/utils/fetch";
import EchartsRing from "./components/echartsRing.vue";
import EchartsArcbar from "./components/echartsArcbar.vue";
import Content from "@/components/content/index.vue";
import { setPageData } from "@/store/user";
export default {
  components: {
    EchartsRing,
    Content,
    EchartsArcbar,
  },
  data() {
    return {
      loading: true,
      loading1: true,
	  warnList:[
		  {label:'生产消息',value:16},
		  {label:'设备消息',value:16},
		  {label:'模具消息',value:16},
		]
    };
  },
  computed: {},
  onLaunch: function () {},
  onReady: async function () {
    this.init();
  },
  onHide: function () {},
  methods: {
    init() {
      const that = this;
      that.$loading.open();
      that.loading1 = true;
      fetch("get", "/dms/mobile/device/status").then(({ data }) => {
        that.loading1 = false;
        that.$nextTick(() => {
          that.$refs.echartsRing.init({
            subtitle: {
              name: data.totalDevice,
              fontSize: 25,
              color: "#7cb5ec",
            },
          });
          let res = {
            series: [
              {
                data: Object.entries(data.statusMap).map((item) => {
                  return {
                    name: item[0] + "  " + item[1],
                    value: item[1] ? parseInt(item[1]) : 0,
                  };
                }),
              },
            ],
          };
          that.$refs.echartsRing.setData(res);
        });
      });

      fetch("get", "/dms/mobile/device/use/ratio").then(({ data }) => {
        that.loading = false;
        that.$nextTick(() => {
          that.setEchart(
            "echartsArcbar",
            "本月",
            data.month ? parseInt(data.month) : 0
          );
          that.setEchart(
            "echartsArcbar1",
            "本周",
            data.week ? parseInt(data.week) : 0
          );
          that.setEchart(
            "echartsArcbar2",
            "本日",
            data.day ? parseInt(data.day) : 0
          );
        });
      });
    },
	warnTypeClick(item){
		uni.navigateTo({
			url:'/pages/staging/andon/index?type='+item.label
		})
	},
    setEchart(refName, name, data) {
      const obj = {
        title: {
          name: data + "%",
          fontSize: 16,
          color: "#5889f1",
        },
        subtitle: {
          name: name,
          fontSize: 16,
          color: "#666666",
        },
      };
      let res = {
        series: [
          {
            name: "本月",
            color: "#5889f1",
            data: data / 100,
          },
        ],
      };
      this.$refs[refName].init(obj);
      this.$refs[refName].setData(res);
    },
    toPath(url, data) {
      if (data) setPageData(data);
      uni.navigateTo({
        url: url,
        animationType: "pop-in",
      });
    },
  },
};
</script>
<style scoped lang="scss">
.page-box {
  padding-bottom: 20rpx;

  // padding-top: 100rpx;
  > div {
    background-color: #fff;
    margin-bottom: 10rpx;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 40rpx;

  span:nth-child(2) {
    color: #0c25b3;
  }
}
.echart-box {
  min-height: 200px;
}

.device-status {
  background-color: #fff;
  margin-bottom: 10rpx;
}

.device-availability {
  background-color: #fff;
  margin-bottom: 10rpx;

  .echart-box {
    display: flex;
    justify-content: space-between;
    padding: 40rpx;

    /deep/ .charts-box {
      width: 30%;
      height: 300rpx;
    }
  }
}

.early-warning {
  padding: 20rpx;
  background-color: #fff;

  .early-box {
    display: flex;
    flex-wrap: wrap;

    .early-warning-item {
      width: 46%;
      background-color: #f9faff;
      display: flex;
      align-items: center;
      margin: 2%;
      padding: 10rpx;

      .img-box {
        margin: 0 20rpx;
        width: 60rpx;
        height: 60rpx;
        background-color: #83afee;
      }

      .item-r {
        p {
          &:last-child {
            color: #666;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>
